<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-03-06 11:38:11
 * @LastEditTime: 2023-03-08 10:15:46
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\product\productClassify.vue
-->
<template>
  <el-container class="classify">
    <el-aside class="classify-dep">
      <z-button icon="xinzeng" @click="onDep()" class="mb-10" v-if="purview(2)">新增分类</z-button>
      <el-tree
        ref="tree"
        node-key="id"
        highlight-current
        :data="classify.options[0].children"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="onTreeClick"
        v-if="classify.options.length"
      >
        <template #default="{ node, data }">
          <p class="dis-flex flex-x-between w-100">
            <span>{{ node.label }}</span>
            <span v-if="data.value">
              <el-button type="primary" link @click="onDep(data)" v-if="purview(3)">修改</el-button>
              <el-button type="danger" link @click="onDepDel(data)" v-if="purview(4)">删除</el-button>
            </span>
          </p>
        </template>
      </el-tree>
    </el-aside>
    <el-main class="classify-main flexible">
      <ul class="header-buttons">
        <li>
          <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button>
          <z-button icon="add" @click="onAdd" v-if="purview(2)">分类规格编辑</z-button>
        </li>
        <li class="dis-flex">
          <p>
            <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="支持名称/手机号模糊搜索" clearable></el-input>
          </p>
          <el-button-group class="ml-10">
            <columnSetting v-model="table.columns" name="User/GetPage" />
            <el-button>
              <el-icon> <IEpSearch /> </el-icon>
            </el-button>
          </el-button-group>
        </li>
      </ul>
      <el-table :data="table.data" border stripe ref="tableRef" class="flexible-table">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column v-for="(item, index) in table.columns.filter(r => r.show)" :prop="item.id" :label="item.label" :key="item.id + index" align="center">
          <template #default="scope">
            <template v-if="item.id === 'isRequired'">
              <el-tag :type="scope.row[item.id] ? 'danger' : 'success'"> {{ scope.row[item.id] ? '必填' : '非必填' }}</el-tag>
            </template>
            <template v-else>
              {{ scope.row[item.id] }}
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <classifyBind v-model="status.show" :categoryId="params.categoryId" :categoryName="status.categoryName" @onSave="onBindCallBack" />
    <classifyEdit v-model="classify.show" v-model:classifyOptions="classify.editOptions" v-model:editData="classify.editData" @onSave="onClassifyCallback" />
  </el-container>
</template>
<script setup>
import { specOptions } from '@/config/data';
import { post } from '@/api/index';
import classifyEdit from './components/classifyEdit.vue';
import classifyBind from './components/classifyBind.vue';
let { dataProcess, purview } = inject('$global');
let $message = inject('$message');
let store = useStore();

/**
 * @description: 下面处理分类数据
 */
let tree = ref();
let classify = reactive({
  options: [],
  editOptions: [],
  editData: {},
  show: false
});

// 获取分类数据
const getClassify = async () => {
  await store.dispatch('getCategory');
  let arr = store.state.categorys;
  classify.options = dataProcess(arr, 'categoryParentId', '无');
  if (!arr.length) return;
  params.categoryId = arr
    .filter(r => r.categoryParentId === 0)
    .map(r => r.id)
    .sort((l, r) => r - l, 0)[0];
  nextTick(() => {
    tree.value.setCurrentKey(params.categoryId, true);
  });
};
// 分类新增/修改
const onDep = (val = {}) => {
  classify.editOptions = dataProcess(
    store.state.categorys.filter(r => r.id !== val.id),
    'categoryParentId',
    '无'
  );
  classify.editData = val;
  classify.show = true;
};

// 新增修改分类回调
const onClassifyCallback = () => {
  classify.show = false;
  getClassify();
};
const onTreeClick = val => {
  params.categoryId = val.id;
  pageQuery();
};
/**
 * @description: 右侧查询
 */
let tableRef = ref();
let table = reactive({
  columns: [
    { label: '名称', id: 'label', show: true },
    { label: '规格类型', id: 'specTypeName', show: true },
    { label: '默认值', id: 'defaultValue', show: true },
    { label: '是否必填', id: 'isRequired', show: true },
    { label: '备注', id: 'note', show: true }
  ],
  data: [],
  totalCount: 0
});
let status = reactive({
  show: false,
  categoryName: null,
  editData: {}
});
let params = reactive({
  pageIndex: 1,
  pageSize: 999,
  keyword: '',
  categoryId: undefined,
  isNotContain: false
});
const onAdd = () => {
  params.categoryId = tree.value.getCurrentKey();
  status.categoryName = store.state.categorys.find(r => r.id === params.categoryId).label;
  status.show = true;
};
const onEdit = val => {
  status.editData = val;
  status.show = true;
};
const onDel = async val => {
  await post('Role/BulkDelete', { ids: val });
  $message.success('删除成功');
  pageQuery();
};
// 查询列表接口
const pageQuery = async () => {
  let { result } = await post('CustomCategorySpec/GetList', params);
  if (result.columnJson) table.columns = JSON.parse(result.columnJson);
  table.data = result.items.map(r => {
    return {
      ...r,
      ...{
        specTypeName: specOptions.find(n => n.id === r.specType).label
      }
    };
  });
  table.totalCount = result.totalCount;
};
// 创建 保存 回调
const onBindCallBack = () => {
  pageQuery();
  status.show = false;
};
onActivated(async () => {
  await getClassify();
  pageQuery();
});
</script>

<style lang="scss" scoped>
.classify {
  height: 100%;
  &-dep {
    background-color: #fff;
    padding: 10px;
  }
  .header-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  &-main {
    background-color: #fff;
    padding: 10px;
    margin-left: 10px;
  }
}
</style>
